<template>
 <!-- vue2.0需要根元素,vue3可以有多个代码片段 Fragment -->
 <div>
   App
 </div>
 <!-- 1、使用跟模块的state的数据 -->
 <!-- <p>{{$store.state.username}}</p> -->
 <!-- 2、使用getters里面的数据 -->
 <!-- <p>{{$store.getters.newName}}</p> -->
 <!-- <button @click="mutationsFn">mutationsFn</button> -->
</template>
<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    // 使用vuex仓库
    const store = useStore()
    // 1、使用state里面的数据
    console.log(store.state.username)
    // 2、使用getters里面的数据
    console.log(store.getters.newName)
    // 3、提交跟模块mutations数据
    const mutationsFn = () => {
      // store.commit('updateName')
      // 4、调用跟模块actions函数
      store.dispatch('updateName')
    }

    return { mutationsFn }
  }
}
</script>
